<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-file"></i> 我的文件</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <router-link to="/upload">
        <el-button type="primary" size="medium">添加文件</el-button>
      </router-link>

      <el-table
              :data="state.fileList"
              :show-header="true"
              style="width: 100%; margin-top: 20px">

            <el-table-column label="文件名">
              <template #default="scope">
                <el-button type="text" class="message-title" @click="handleFileDetail(scope.row.id)">
                  {{scope.row.fileName}}</el-button>
              </template>
            </el-table-column>

            <el-table-column label="上传时间">
              <template #default="scope">
                <span>{{scope.row.uploadTime}}</span>
              </template>
            </el-table-column>

            <el-table-column width="300" label="操作">
              <template #default="scope">
                <div style="display:flex; width: 100%;">
                  <el-button type="text" style="margin-right: 10px"
                             @click="handleFileDetail(scope.row.id)">查看</el-button>
                  <el-button type="text" style="margin-right: 10px; color: #e6a23c"
                             @click="handleShareDialog(scope.row.id);shareDialogVisible=true">分享</el-button>
                  <el-button type="text" style="color: red"
                             @click="handleDeleteDialog(scope.row.id);deleteDialogVisible=true">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
    </div>

    <el-dialog
            v-model="shareDialogVisible"
            title="确认共享"
            width="30%"
            top="30vh"
    >
      <span>确认要共享该文件到广场吗?</span><br>
      <el-checkbox v-model="checked" style="margin-top: 15px; margin-bottom: 10px">添加答案文件</el-checkbox>
      <el-form  :model="useform" width="300px" v-if="checked === true">
        <el-form-item label="选择文件">
          <el-select v-model="useform.answerFileId" :label-width="120" placeholder="请选择您要使用的文件">
            <el-option
                    v-for="item in state.fileList.valueOf()"
                    :key="item.id"
                    :label="item.fileName"
                    :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="shareDialogVisible = false" size="medium">
          再想想
        </el-button>
        <el-button type="warning" @click="shareDialogVisible = false;handleFileShare()" size="medium">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog
            v-model="deleteDialogVisible"
            title="确认删除"
            width="30%"
            top="30vh"
    >
      <span>确认要删除该文件吗?</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteDialogVisible = false;toDeleteFileId=0;" size="medium">
          再想想
        </el-button>
        <el-button type="danger" @click="deleteDialogVisible = false;toDeleteFileId=0;handleFileDelete()" size="medium">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {ref, reactive,onMounted} from "vue";
import {deleteFile, GetAllFile} from "../../api/file";
import {shareFile} from "../../api/square";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {setAnswer} from "../../api/introduction";

export default {
  name: "fileList",
  setup() {
    const ms_username = localStorage.getItem('ms_username');
    const currentTab = ref("first");
    const router = useRouter();

    let userId = localStorage.getItem("ms_userId");
    let state = reactive({
      fileList: [],
    });
    let shareDialogVisible=ref(false);
    let toShareFileId=ref(0);

    let deleteDialogVisible=ref(false);
    let toDeleteFileId=ref(0);

    let answerFileId=ref(0);
    let checked=ref(false);
    let useform = reactive({
      answerFileId: "",
    });

    //用户Id => 文件列表
    const getFileList=(userId)=>{
      GetAllFile(userId).then(res=>{
        if(res.msg === '成功'){
          state.fileList=res.result;
        }
        else{
          console.log("getFileList Error!");
          ElMessage.error("获取文件列表失败!")
        }
      })
    };

    //查看文件详情
    const handleFileDetail=(fileId)=>{
      router.push({
        path:'fileDetail',
        query:{
          fileId: fileId,
        }
      })
    }

    //打开提示确认删除的对话框，将fileId保存下来
    const handleShareDialog = (fileId)=>{
      toShareFileId=fileId;
    }

    const handleFileShare = ()=>{
      const payload ={
        userId: localStorage.getItem("ms_userId"),
        fileId: toShareFileId
      }
      shareFile(payload).then(res=>{
        if(res.msg === '成功'){
          ElMessage.success("分享成功！")
          getFileList(userId);
          const payload ={
            origin: toShareFileId,
            answer: useform.answerFileId
          };
          setAnswer(payload).then(res=>{
            if(res.msg === '成功') {
              ElMessage.success("答案文件设置成功！")
            } else{
              ElMessage.error("答案文件设置失败！错误码:"+res.status)
            }
          })
        }
        else{
          ElMessage.error("分享失败！错误码:"+res.status)
        }
      })
    }

    //打开提示确认删除的对话框，将fileId保存下来
    const handleDeleteDialog = (fileId)=>{
      toDeleteFileId=fileId;
    }

    //删除对应文件
    const handleFileDelete = () => {
      deleteFile(toDeleteFileId).then(res=>{
        if(res.msg === '成功'){
          ElMessage.success("删除成功!")
          getFileList(userId);
        }
        else{
          ElMessage.error("删除失败!错误码:"+res.msg)
        }
      })
    };

    //初始化
    onMounted(() => {
      getFileList(userId);
    })

    return {
      ms_username,

      currentTab,
      state,

      shareDialogVisible,
      toShareFileId,
      handleShareDialog,

      deleteDialogVisible,
      toDeleteFileId,
      handleDeleteDialog,

      handleFileDetail,
      handleFileShare,
      handleFileDelete,
      getFileList,

      answerFileId,
      checked,
      useform,
    };
  },
};
</script>

<style>
.message-title {
  cursor: pointer;
}
.handle-row {
  margin-top: 30px;
}
</style>

